// Tests / Mixins / Breakpoint

// th-breakpoint()
// ------------------------------

mixin th-breakpoint {

  @include th-assert(
    $describe: "Output a heading with a 768px breakpoint within a 768px min-width media query."
  ){
    @include th-assert-expect {
      @media (min-width: 768px) {
        font-size: 2.72222em;
        line-height: 1.20408;
        margin-top: 69px;
        margin-bottom: 2.875rem;
      }
    }
    @include th-assert-actual {
      @include th-breakpoint(768px, 768px) {
        @include th-heading($heading: h2);
      }
    }
  }

  @include th-assert(
    $describe: "Output styles for a heading with a 768px breakpoint within a 768px max-width media query."
  ){
    @include th-assert-expect {
      @media (max-width: 768px) {
        font-size: 2.72222em;
        line-height: 1.20408;
        margin-top: 69px;
        margin-bottom: 2.875rem;
      }
    }
    @include th-assert-actual {
      @include th-breakpoint(max-width 768px, 768px) {
        @include th-heading(h2);
      }
    }
  }

  @include th-assert(
    $describe: "Output styles for a heading with a 768px breakpoint within a range media query range from 768px to 1023px."
  ){
    @include th-assert-expect {
      @media (min-width: 768px) and (max-width: 1023px) {
        font-size: 2.72222em;
        line-height: 1.20408;
        margin-top: 69px;
        margin-bottom: 2.875rem;
      }
    }
    @include th-assert-actual {
      @include th-breakpoint(768px 1023px, 768px) {
        @include th-heading(h2);
      }
    }
  }

}

// th-breakpoint-context()
// ------------------------------

mixin th-breakpoint-context {

  @include th-assert(
    $describe: "Output a heading with a 768px breakpoint context."
  ){
    @include th-assert-expect {
      font-size: 5em;
      line-height: 1.11111;
      margin-top: 110px;
      margin-bottom: 5rem;
    }
    @include th-assert-actual {
      @include th-breakpoint-context(1024px) {
        $breakpoint: th-core-context-get(breakpoint);
        @include th-heading($heading: h1, $breakpoint: $breakpoint);
      }
    }
  }

}